<li local-class='project-settings-integrations-list-item'>
  {{#if this.isEditing}}
    <ProjectSettings::Integrations::Form
      @integration={{@integration}}
      @project={{@project}}
      @errors={{this.errors}}
      @onSubmit={{fn this.update}}
      @onCancel={{fn this.toggleEdit}}
    />
  {{else}}
    <div local-class='details'>
      <div local-class='details-info'>
        {{inline-svg this.logoService local-class='details-logo'}}
        <span local-class='details-service'>
          {{t this.mappedServiceTranslationKey}}
        </span>

        <span local-class='details-preview'>
          {{@integration.data.url}}
          {{@integration.data.sasBaseUrl}}
          {{@integration.data.accessKeyId}}
          {{@integration.data.bucket}}
          {{@integration.data.pathPrefix}}

          {{#if @integration.lastExecutedAt}}
            <span local-class='details-last-executed-at'>{{t 'components.project_settings.integrations.last_executed_at'}} {{time-ago-in-words @integration.lastExecutedAt}}</span>
          {{/if}}
        </span>
      </div>

      <div local-class='details-actions'>
        {{#if this.serviceIsExecutable}}
          <button class='button button--filled button--iconOnly' {{on 'click' (fn this.toggleExecuting)}}>
            {{inline-svg '/assets/arrow-up-right.svg' class='button-icon'}}
          </button>
        {{/if}}

        {{#if (get @permissions 'update_project_integration')}}
          <button class='button button--filled button--white' {{on 'click' (fn this.toggleEdit)}}>
            {{t 'components.project_settings.integrations.edit'}}
          </button>
        {{/if}}

        {{#if (get @permissions 'delete_project_integration')}}
          <AsyncButton @onClick={{fn this.delete}} @loading={{this.isDeleting}} class='button button--filled button--red'>
            {{t 'components.project_settings.integrations.delete'}}
          </AsyncButton>
        {{/if}}
      </div>
    </div>
  {{/if}}
</li>

{{#if this.isExecuting}}
  <AccModal @small={{true}} @onClose={{fn this.toggleExecuting}}>
    {{component this.dataExecuteComponent integration=@integration close=this.toggleExecuting}}
  </AccModal>
{{/if}}